<template>
  <div class="content">
    <dc-header :title="'账号与安全'" :page-to="'/setting'"></dc-header>
    <div class="head-top mt20">
      <div>
        <mt-cell class="list no-border p20"  @click.native="sheetVisible = true">
          <span slot="title" class="al-center">
            <div class="list-inline">
              <div class="mint-cell-text" style="margin-left:-10px;">头像修改</div>
            </div>
          </span>
          <span>
            <span class="sValue">
              <img :src="userInfo.photo"
                   class="avatar img-radius"/>
            </span>
          </span>
        </mt-cell>
      </div>
      <dc-cell :title="'姓名'" :value="userInfo.fullname" :to="'username'" isLink></dc-cell>
      <dc-cell :title="'手机号'" :value="userInfo.mobile" style="padding-right: 6px;"></dc-cell>
      <dc-cell :title="'修改密码'" :to="'password'" isLink class="mt20"></dc-cell>
      <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import cell from '@/components/cell';
  import {mapGetters} from 'vuex';
  import nativeAction from '@/common/native';
  /**
   * @namespace  components/personal/setting
   * @author ashen
   */
  export default {
    components: {
      'dc-header': header,
      'dc-cell': cell
    },
    data () {
      return {
        sheetVisible: false,
        actions: []
      };
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
      takePhoto () {
        nativeAction.changeImages(0, this);
      },
      openAlbum () {
        nativeAction.changeImages(1, this);
      },
      goBack () {
        history.go(-1);
      }
    },
    mounted () {
      this.actions = [{
        name: '拍照',
        method: this.takePhoto
      }, {
        name: '从相册中选择',
        method: this.openAlbum
      }];
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";
  .avatar{
    width: px2rem(120px);
    height: px2rem(120px);
  }
</style>

